<!--
 * @Author: xiangqizhi
 * @Date: 2021-12-02 11:18:32
 * @LastEditors: xj
 * @LastEditTime: 2021-12-10 09:49:34
 * @Descripttion: 
-->
<template>
    <div>
        <Editor id="tinymces" :init="init" :disabled="disabled" v-model="myValue"></Editor>
    </div>
</template>

<script>
//引入tinymce-vue
// import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本编辑器主题的js和css
// import 'tinymce/skins/content/default/content.css'
// import 'tinymce/themes/silver'
// import 'tinymce/icons/default/icons' // 解决了icons.js 报错Unexpected token '<'
// import "tinymce/plugins/paste";
// import "tinymce/plugins/image";
// import "tinymce/plugins/link";
// import "tinymce/plugins/code";
// import "tinymce/plugins/table";
// import "tinymce/plugins/lists";
// import "tinymce/plugins/preview";
// import "tinymce/plugins/autosave";
import { getToken } from 'src/utils/auth'
import { normalize } from './ContentFilter'
export default {
    components: { Editor },
    props: {
        //内容
        value: {
            type: String,
            default: ''
        },
        //是否禁用
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        const _this = this
        return {
            editor: null,
            myValue: this.value,
            test: '',
            init: {
                language_url: "/tinymce/langs/zh_CN.js",
                language: "zh_CN",
                convert_urls: false, // TinyMCE添加图片 路径自动处理成相对路径
                skin_url: "/tinymce/skins/ui/oxide",
                content_style: "p {margin: 0px; border:0px ; padding: 0px;}",
                height: 300,
                menubar: false,
                plugins: 'paste link lists image code table preview autosave',
                // toolbar: 'preview restoredraft | bold italic underline strikethrough | fontsizeselect fontselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink code table | removeformat',
                toolbar: 'preview restoredraft | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | image | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo',
                init_instance_callback: (editor) => {
                    _this.editor = editor
                    const str = _this.editor.getContent({ 'format': 'text' }).replace(/\s+/ig, ' ').trim()
                    this.$emit('input', _this.myValue, str.length)
                },
                paste_postprocess: function (plugin, args) {
                    normalize(args.node)
                },
                images_upload_handler: function (blobInfo, succFun, failFun) {
                    let xhr, formData;
                    let file = blobInfo.blob();//转化为易于理解的file对象
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    // xhr.open('POST', _this.$baseApi + '/file/upload');
                    xhr.open('POST', _this.$baseApi + '/infra/file/upload');
                    xhr.onload = function () {
                        let json;
                        if (xhr.status != 200) {
                            failFun('HTTP Error: ' + xhr.status);
                            return;
                        }
                        json = JSON.parse(xhr.responseText);
                        if (!json || typeof json.data != 'string') {
                            failFun('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        json.location = json.data;
                        succFun(json.location);
                    };
                    formData = new FormData();
                    formData.append('file', file, file.name);//此处与源文档不一样
                    xhr.setRequestHeader('RdAuthorization', getToken());
                    xhr.send(formData);
                }
            }
        }
    },
    mounted() {

    },
    methods: {},
    watch: {
        //监听内容变化
        value(newValue) {
            this.myValue = newValue
        },
        myValue: function (newValue) {
            if (this.editor) {
                const str = this.editor.getContent({ 'format': 'text' }).replace(/\s+/ig, ' ').trim()
                this.$emit('input', newValue, str.length)
            }
        }
    }
}
</script>
<style>
.tox-notifications-container {
    display: none;
}

.tox-tinymce-aux {
    z-index: 5000 !important;
}

.tox-statusbar {
    display: none !important;
}
</style>